<script>
import { defineComponent, reactive, ref } from 'vue'
import { favoriteList } from '@Config/server/api'
import * as Antd from 'ant-design-vue'
import { message } from 'ant-design-vue'
import { Messages } from '@Config/config'
export default defineComponent({
  emits: ['close', 'result'],
  props: {
    libId: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  setup(props, context) {
    let libId = props.libId
    let loading = ref(true)

    let list = reactive({ data: [] })
    favoriteList({
      index: 1,
      size: 100000,
      libId: libId instanceof Array && libId.length > 1 ? null : libId[0],
    }).then((_list) => {
      loading.value = false

      if (_list.code == 0) {
        list.data = _list.data.records.map((x) => {
          x.label = x.title
          x.value = x.id
          return x
        })
      } else {
        Messages.add(message.error(`获取备份文件夹错误[${_list.msg}]`))
        list.data = []
      }
    })

    let selected = ref()

    let cancelHandler = () => {
      context.emit('close')
    }

    let submitHandler = () => {
      context.emit('result', {
        favoriteId: selected.value,
      })
      context.emit('close')
    }
    let changeHandler = (e) => {
      selected.value = e.target.value
    }

    return { list, submitHandler, cancelHandler, changeHandler, loading }
  },
  render() {
    return this.loading == true ? (
      <Antd.Spin tip="数据加载中..." />
    ) : this.list.data.length == 0 ? (
      <Antd.Empty />
    ) : (
      <Antd.Row gutter={[20, 20]}>
        <Antd.Col span={24}>
          <Antd.RadioGroup onChange={this.changeHandler}>
            {this.list.data.map((x) => {
              return (
                <Antd.Radio value={x.value}>
                  {x.label}
                  {x.isFavorite == 1 && <span class="red">(已备份)</span>}
                </Antd.Radio>
              )
            })}
          </Antd.RadioGroup>
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Button type="primary" onClick={this.submitHandler}>
              确定
            </Antd.Button>
            <Antd.Button type="primary" danger onClick={this.cancelHandler}>
              取消
            </Antd.Button>
          </Antd.Space>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
